<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户认证</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .auth-container {
            background-color: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            width: 350px;
            animation: fadeIn 0.5s;
        }
        .auth-tabs {
            display: flex;
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
        }
        .auth-tab {
            padding: 10px 20px;
            cursor: pointer;
            text-align: center;
            flex: 1;
            color: #666;
        }
        .auth-tab.active {
            color: #4285f4;
            border-bottom: 2px solid #4285f4;
            font-weight: bold;
        }
        .auth-form {
            display: none;
        }
        .auth-form.active {
            display: block;
        }
        .form-group {
            margin-bottom: 15px;
        }
        .form-group label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        .form-group input {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .captcha-group {
            display: flex;
            align-items: center;
        }
        .captcha-group input {
            flex: 1;
            margin-right: 10px;
        }
        .captcha-img {
            height: 40px;
            cursor: pointer;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .remember-me {
            margin: 15px 0;
            display: flex;
            align-items: center;
        }
        .remember-me input {
            margin-right: 5px;
        }
        .auth-btn {
            width: 100%;
            padding: 12px;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }
        .auth-btn:hover {
            background-color: #3367d6;
        }
        .auth-links {
            margin-top: 20px;
            text-align: center;
        }
        .auth-links a {
            color: #4285f4;
            text-decoration: none;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* 新增：验证码按钮样式 */
        .verify-btn {
            padding: 10px;
            background-color: #4285f4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            transition: background-color 0.3s;
        }
        .verify-btn:hover {
            background-color: #3367d6;
        }
        .verify-btn.disabled {
            background-color: #ccc;
            cursor: not-allowed;
        }
    </style>
</head>
<body>
    <div class="auth-container">
        <div class="auth-tabs">
            <div class="auth-tab active" onclick="switchTab('login')">登录</div>
            <div class="auth-tab" onclick="switchTab('register')">注册</div>
            <div class="auth-tab" onclick="switchTab('forgot')">忘记密码</div>
        </div>

        <div id="login-form" class="auth-form active">
            <form>
                <div class="form-group">
                    <label for="login-username">用户名</label>
                    <input type="text" id="login-username" placeholder="请输入用户名" required>
                </div>
                <div class="form-group">
                    <label for="login-password">密码</label>
                    <input type="password" id="login-password" placeholder="请输入密码" required>
                </div>
                <div class="form-group">
                    <label for="login-captcha">验证码</label>
                    <div class="captcha-group">
                        <input type="text" id="login-captcha" placeholder="请输入验证码" required>
                        <img src="a.gif" onclick="refreshCaptcha('login')">
                    </div>
                </div>
                <div class="remember-me">
                    <input type="checkbox" id="remember">
                    <label for="remember">记住密码</label>
                </div>
                <button type="submit" class="auth-btn">登录</button>
                <div class="auth-links">
                    <a href="javascript:void(0)" onclick="switchTab('register')">注册账号</a> | 
                    <a href="javascript:void(0)" onclick="switchTab('forgot')">忘记密码</a>
                </div>
            </form>
        </div>

        <div id="register-form" class="auth-form">
            <form>
                <div class="form-group">
                    <label for="reg-username">用户名</label>
                    <input type="text" id="reg-username" placeholder="4-16位字母或数字" required>
                </div>
                <div class="form-group">
                    <label for="reg-password">密码</label>
                    <input type="password" id="reg-password" placeholder="6-20位字符" required>
                </div>
                <div class="form-group">
                    <label for="reg-confirm-password">确认密码</label>
                    <input type="password" id="reg-confirm-password" placeholder="再次输入密码" required>
                </div>
                <div class="form-group">
                    <label for="reg-email">电子邮箱</label>
                    <input type="email" id="reg-email" placeholder="请输入有效邮箱" required>
                </div>
                <div class="form-group">
                    <label for="reg-captcha">验证码</label>
                    <div class="captcha-group">
                        <input type="text" id="reg-captcha" placeholder="请输入验证码" required>
                        <img src="a.gif" onclick="refreshCaptcha('register')">
                    </div>
                </div>
                <button type="submit" class="auth-btn">注册</button>
                <div class="auth-links">
                    已有账号？<a href="javascript:void(0)" onclick="switchTab('login')">立即登录</a>
                </div>
            </form>
        </div>

        <!-- 新增：忘记密码表单 -->
        <div id="forgot-form" class="auth-form">
            <form>
                <div class="form-group">
                    <label for="forgot-email">注册邮箱</label>
                    <input type="email" id="forgot-email" placeholder="请输入注册时使用的邮箱" required>
                </div>
                <div class="form-group">
                    <label for="forgot-code">验证码</label>
                    <div class="captcha-group">
                        <input type="text" id="forgot-code" placeholder="请输入验证码" required>
                        <button type="button" class="verify-btn" id="send-code">获取验证码</button>
                    </div>
                </div>
                <div class="form-group">
                    <label for="forgot-password">新密码</label>
                    <input type="password" id="forgot-password" placeholder="设置新密码" required>
                </div>
                <div class="form-group">
                    <label for="forgot-confirm">确认新密码</label>
                    <input type="password" id="forgot-confirm" placeholder="再次输入新密码" required>
                </div>
                <button type="submit" class="auth-btn">重置密码</button>
                <div class="auth-links">
                    想起密码了？<a href="javascript:void(0)" onclick="switchTab('login')">返回登录</a>
                </div>
            </form>
        </div>
    </div>

    <script>
        function switchTab(tabName) {
            // 切换标签页样式
            document.querySelectorAll('.auth-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            document.querySelector(`.auth-tab[onclick="switchTab('${tabName}')"]`).classList.add('active');

            // 切换表单显示
            document.querySelectorAll('.auth-form').forEach(form => {
                form.classList.remove('active');
            });
            document.getElementById(`${tabName}-form`).classList.add('active');
        }

        function refreshCaptcha(formType) {
            document.querySelector(`#${formType}-form .captcha-img`).src = 'https://www.oschina.net/action/user/captcha?t=' + new Date().getTime();
        }

        // 新增：验证码倒计时功能
        document.addEventListener('DOMContentLoaded', function() {
            const sendCodeBtn = document.getElementById('send-code');
            if (sendCodeBtn) {
                sendCodeBtn.addEventListener('click', function() {
                    let countdown = 60;
                    this.disabled = true;
                    this.classList.add('disabled');
                    this.textContent = `重新发送(${countdown}s)`;
                    
                    const timer = setInterval(() => {
                        countdown--;
                        this.textContent = `重新发送(${countdown}s)`;
                        
                        if (countdown <= 0) {
                            clearInterval(timer);
                            this.disabled = false;
                            this.classList.remove('disabled');
                            this.textContent = '获取验证码';
                        }
                    }, 1000);
                });
            }
        });
    </script>
</body>
</html>